<template>
  <div class="refund-form-overlay" v-if="isOpen" @click.self="closeForm">
    <div class="refund-form-container">
      <div class="refund-form-header">
        <h3>申请售后退款</h3>
        <span class="close-btn" @click="closeForm">&times;</span>
      </div>
      <div class="refund-form-content">
        <div class="refund-notice">
          <i class="fa fa-info-circle"></i>
          <span>请选择真实原因，避免影响处理结果</span>
        </div>
        
        <div class="refund-reason-section">
          <h4>退款原因</h4>
          <div class="reason-options">
            <div 
              v-for="(reason, index) in reasonOptions" 
              :key="index"
              :class="['reason-option', selectedReason === reason ? 'selected' : '']"
              @click="selectedReason = reason"
            >
              {{ reason }}
            </div>
          </div>
        </div>
        
        <div class="refund-detail-section">
          <h4>补充说明 <span class="optional">(选填)</span></h4>
          <textarea 
            v-model="reasonDetail" 
            placeholder="请详细描述您遇到的问题，以便我们更好地为您解决" 
            maxlength="200"
          ></textarea>
          <div class="char-count">{{ reasonDetail.length }}/200</div>
        </div>
      </div>
      <div class="refund-form-footer">
        <button class="cancel-btn" @click="closeForm">取消</button>
        <button 
          class="submit-btn" 
          @click="submitRefund"
          :disabled="!selectedReason"
        >
          提交申请
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
  orderId: {
    type: [Number, String],
    required: true
  },
  isOpen: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['close', 'submit']);

const reasonOptions = [
  '配送超时',
  '收到的商品少了/错了',
  '未收到商品',
  '商品图片/备注不符',
  '商品安全质量不佳'
];

const selectedReason = ref('');
const reasonDetail = ref('');

const closeForm = () => {
  emit('close');
  // 重置表单
  selectedReason.value = '';
  reasonDetail.value = '';
};

const submitRefund = () => {
  if (!selectedReason.value) {
    alert('请选择退款原因');
    return;
  }
  
  const refundData = {
    reason: selectedReason.value,
    detail: reasonDetail.value,
    orderId: props.orderId
  };
  
  emit('submit', refundData);
};
</script>

<style scoped>
.refund-form-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.refund-form-container {
  width: 85%;
  max-width: 500px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.refund-form-header {
  padding: 4vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
}

.refund-form-header h3 {
  margin: 0;
  font-size: 4.5vw;
  font-weight: 600;
  color: #333;
}

.close-btn {
  font-size: 6vw;
  color: #999;
  cursor: pointer;
}

.refund-form-content {
  padding: 4vw;
  max-height: 60vh;
  overflow-y: auto;
}

.refund-notice {
  display: flex;
  align-items: center;
  padding: 3vw;
  background-color: #fff9e6;
  border-radius: 4px;
  margin-bottom: 4vw;
}

.refund-notice i {
  color: #ff9800;
  margin-right: 2vw;
  font-size: 4vw;
}

.refund-notice span {
  color: #666;
  font-size: 3.5vw;
}

.refund-reason-section,
.refund-detail-section {
  margin-bottom: 4vw;
}

.refund-reason-section h4,
.refund-detail-section h4 {
  font-size: 3.8vw;
  color: #333;
  margin: 0 0 2vw 0;
  font-weight: 600;
}

.optional {
  font-size: 3.2vw;
  color: #999;
  font-weight: normal;
}

.reason-options {
  display: flex;
  flex-wrap: wrap;
  gap: 2vw;
}

.reason-option {
  padding: 2vw 3vw;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 3.5vw;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reason-option.selected {
  border-color: #0097ff;
  background-color: #e6f7ff;
  color: #0097ff;
}

textarea {
  width: 100%;
  height: 20vw;
  padding: 2vw;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: none;
  font-size: 3.5vw;
  color: #333;
  box-sizing: border-box;
}

.char-count {
  text-align: right;
  font-size: 3.2vw;
  color: #999;
  margin-top: 1vw;
}

.refund-form-footer {
  padding: 3vw 4vw;
  display: flex;
  justify-content: flex-end;
  gap: 3vw;
  border-top: 1px solid #eee;
}

.cancel-btn, .submit-btn {
  padding: 2vw 5vw;
  border: none;
  border-radius: 4px;
  font-size: 3.8vw;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #666;
}

.submit-btn {
  background-color: #0097ff;
  color: white;
}

.submit-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
</style> 